<template>
  <div class="employees-container">
    <!-- {{ $store.getters.roles.points }} -->
    <!-- 按钮操作权
      1. 禁用
      2. 隐藏
      3. 可以点击但我给你提示 比如游戏，点个按钮可以给你点，然后让你充钱
     -->
    <!-- <assign-role :show-role-dialog="showRoleDialog" :user-id="userId" @update:showRoleDialog="showRoleDialog = $event" /> -->
    <!-- <assign-role :show-role-dialog="showRoleDialog" :user-id="userId" @update:showRoleDialog="showRoleDialog = $event" /> -->
    <assign-role :show-role-dialog.sync="showRoleDialog" :user-id="userId" />
    <el-dialog
      width="300px"
      title="二维码"
      :visible="showCodeDialog"
      @close="closeDialog"
    >
      <el-row type="flex" justify="center">
        <!-- 生成二维码的画布 -->
        <canvas ref="myCanvas" />
        <!-- 二维码 -->
      </el-row>
    </el-dialog>
    <div class="app-container">
      <page-tools>
        <template #left>
          <span>总记录数: {{ total }} 条</span>
        </template>

        <template #right>
          <!-- $router -->
          <el-button
            type="warning"
            size="small"
            @click="$router.push(`/import?type=user`)"
          >excel导入</el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDownload"
          >excel导出</el-button>
          <el-button
            type="primary"
            size="small"
            @click="showDialog = true"
          >新增员工</el-button>
        </template>
      </page-tools>
      <el-card style="margin-top: 10px">
        <el-table v-loading="loading" border :data="list">
          <el-table-column label="序号" type="index" sortable="" width="80" />
          <el-table-column label="姓名" prop="username" sortable="" />
          <el-table-column label="头像">
            <template #default="{ row }">
              <img
                v-imgerror="defaultImage"
                class="staff"
                :src="row.staffPhoto || defaultImage"
                alt=""
                @click="clickShowCodeDialog(row.staffPhoto)"
              >
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="mobile" sortable="" />
          <el-table-column label="工号" prop="workNumber" sortable="" />
          <el-table-column
            :formatter="formatterFn"
            label="聘用形式"
            prop="formOfEmployment"
            sortable=""
          />
          <el-table-column label="部门" prop="departmentName" sortable="" />
          <el-table-column label="入职时间" prop="timeOfEntry" sortable="">
            <template #default="{ row }">
              <!-- {{ formatDate(row.timeOfEntry, '~') }} -->
              <!-- 需求 使用过滤器，把-改成~~ -->
              {{ row.timeOfEntry | formatDate("~~") }}
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <!-- 作用域插槽 解构出row 就是本行数据 -->
            <template #default="{ row }">
              <el-button
                type="text"
                size="small"
                @click="$router.push(`/employees/detail/${row.id}`)"
              >查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="editRole(row.id)">角色</el-button>
              <!--
                :disabled="!checkPermissions('DEL_EMPLOYEE')"
                v-if="checkPermissions('DEL_EMPLOYEE')"
               -->
              <el-button
                type="text"
                size="small"
                @click="delEmployee(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px">
          <!--
            total 总条数
            current-page 当前页 并且显示高亮
            page-size 每页展示的条数
            layout 展示布局， 这里不是完整的功能 就展示 左箭头（上一页） 页码 右箭头（下一页）
            current-change 切换页码
           -->
          <el-pagination
            :total="total"
            :current-page="page"
            :page-size="pageSize"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
    <!--
      .sync 放权
      update:xxx 能省略吗 不能
      emit('update:xxx', yyy) yyy参数能省略吗 不能
      能省略的是 监听的事件
     -->
    <add-employee :show-dialog.sync="showDialog" />
    <!-- <add-employee :show-dialog.sync="showDialog" @add-employee="getEmployeeList" /> -->
    <!-- <add-employee :show-dialog="showDialog" @update:showDialog="showDialog = $event" /> -->
  </div>
</template>

<script>
import { formatDate } from '@/filters'
import { reqGetEmployeeList, reqDelEmployee } from '@/api/employees'
import EmployeeEnum from '@/api/constant/employees'
import AddEmployee from './components/add-employee.vue'
import QRCode from 'qrcode'
import AssignRole from './components/assign-role.vue'
import hello from '@/mixins/hello'
import cp from '@/mixins/checkPermission'
// console.log(EmployeeEnum.hireType)
export default {
  name: 'Employees',
  components: { AddEmployee, AssignRole },
  mixins: [hello, cp],
  data() {
    return {
      userId: '',
      showRoleDialog: false,
      showCodeDialog: false,
      defaultImage:
        'https://img2.baidu.com/it/u=3409195701,3249202311&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=602',
      showDialog: false,
      list: [], // 渲染数据的列表
      page: 1, // 当前页
      pageSize: 10, // 每页条数
      total: 0, // 总数
      loading: false,
      dd: '点点小朋友'
    }
  },
  created() {
    console.log('这是自己组件的created')
    this.getEmployeeList()
    this.sayHi()
  },
  methods: {
    sayHi() {
      console.log('hi,你好鸭!')
    },
    // checkPermissions(key) {
    //   // console.log(key, this.$store.getters.roles.points)
    //   // true 有权限 false 没有权限
    //   return this.$store.getters.roles?.points?.includes?.(key)
    // },
    editRole(id) {
      // 1. 打开弹层
      this.showRoleDialog = true
      // 2. userId赋值
      this.userId = id
      // 3. 父传子给到弹层 在弹层组件上父传子
    },
    clickShowCodeDialog(url) {
      // 二维码是信息的载体，没有url就生成不了二维码
      if (!url) return
      this.showCodeDialog = true
      // getContext是canvas的方法，需要获取到canvas元素调用才有用
      // 调用报错了说明元素没有获取到，就是没有拿到更新的dom
      // QRCode.toCanvas(this.$refs.myCanvas, url)
      // dom还没有更新，dom的更新是异步的，要获取最新的dom要用nextTick
      this.$nextTick(() => {
        // // DOM 现在更新了
        QRCode.toCanvas(this.$refs.myCanvas, url)
      })
    },
    // 关二维码弹层
    closeDialog() {
      this.showCodeDialog = false
    },
    /**
     * 导出功能，具体要看产品的需求
     * 比如分页的页面，导出是导出当前页还是导出所有数据，这2种需求都有可能有
     * 具体是看产品经理需要哪种需求
     * this.list 指的是当前页的数据 不是所有的数据
     * 在人资项目，我们的需求是导出所有的数据 有个投机取巧的技巧
     * total 总条数 所以我们请求的时候如果页码设置第一页 一页多少条设置总条数
     * 会获取到所有的数据
     */
    async handleDownload() {
      // 获取所有数据
      const {
        data: { rows }
      } = await reqGetEmployeeList(1, this.total)
      console.log(rows)
      // 表头， 以后工作具体需求，产品会告诉你需要哪些
      const multiHeader = [
        ['姓名', '主要信息', '      ', '      ', '       ', '   ', '部门']
      ]
      const headersArr = [
        '姓名',
        '手机号',
        '入职日期',
        '聘用形式',
        '转正日期',
        '工号',
        '部门'
      ]
      const merges = ['A1:A2', 'B1:F1', 'G1:G2']
      const headersRelations = {
        姓名: 'username',
        手机号: 'mobile',
        入职日期: 'timeOfEntry',
        聘用形式: 'formOfEmployment',
        转正日期: 'correctionTime',
        工号: 'workNumber',
        部门: 'departmentName'
      }
      // 实现formatJson返回值拿到的是二维数组
      const dataArr = this.formatJson(rows, headersArr, headersRelations)
      console.log(dataArr)
      // 懒加载 因为`js-xlsx`体积还是很大，导出功能也不是特别常用
      import('@/vendor/Export2Excel').then((excel) => {
        // data指的表格的数据，他的格式是二维数组 语法就是这样
        /**
         * [
         *  [],
         *  [],
         *  []
         * ]
         * 对于上述的结构说明就有3条数据
         */
        // const data = [
        //   [1, '张三', 18],
        //   [3, '王五', 22]
        // ]
        excel.export_json_to_excel({
          header: headersArr,
          data: dataArr,
          multiHeader,
          merges,
          filename: '帅峰的小弟表格'
          // bookType: 'csv'
        })
      })
    },
    // 将对象数组转成二维数组
    /**
     * ['姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门']
     * rows 参数 是对象数组
     * [
     *  [张三, 13xxxx, 2023-10-01, 1,...],
     *  [],
     *  [],
     * ]
     * 数组里面包数组，里面包了个几个数组说明就有多少条数据
     */
    formatJson(rows, headersArr, headersRelations) {
      const result = []
      // 1. 简单拼装二维数组
      rows.forEach((row) => {
        // console.log(row)
        const arr = []
        headersArr.forEach((header) => {
          // console.log(header)
          const englishKey = headersRelations[header]
          // correctionTime timeOfEntry
          let value = row[englishKey]
          if (['correctionTime', 'timeOfEntry'].includes(englishKey)) {
            // 处理转正日期和入职日期的格式
            value = formatDate(value, '/')
          }
          if (englishKey === 'formOfEmployment') {
            // 处理聘用形式
            value =
              EmployeeEnum.hireType.find((item) => item.id === +value)?.value ||
              '未知'
          }
          arr.push(value)
        })
        result.push(arr)
      })
      return result
    },
    delEmployee(id) {
      const flag = this.checkPermissions('DEL_EMPLOYEE')
      if (!flag) {
        this.$message.error('你没有删除权限，请联系管理员')
        return
      }
      // 确认框
      this.$confirm('确定要删除该员工?', '温馨提示')
        .then(async() => {
          // 点击确认
          // 发送删除请求
          await reqDelEmployee(id)
          // 细节处理，如果列表只剩最后一项并且页码是大于1的时候，page去前一页
          if (this.list.length === 1 && this.page > 1) {
            this.page--
          }
          // 提示信息删除成功
          this.$message.success('删除成功')
          // 刷新列表
          this.getEmployeeList()
        })
        .catch(() => {
          console.log('取消')
        })
    },
    // formatDate,
    // haha,
    testFn(str) {
      return str + 'haha'
    },
    /**
     * cellValue - 表格中内容字段的值
     * 其他字段用的不多仅做了解
     * row - 一行的数据
     * column - 列的信息
     * index - 索引
     */
    formatterFn(row, column, cellValue, index) {
      // console.log({ row, column, cellValue, index })
      // return cellValue
      // find需要注意，可能没有找到对应的项，在这里没有找到的话返回undefined
      // undefind再用点操作会报错 解决方法有2个 三目或者可选链
      return (
        EmployeeEnum.hireType.find((item) => item.id === +cellValue)?.value ||
        '未知'
      )
      // obj找到就是对象 没找到是undefined
      // const obj = EmployeeEnum.hireType.find(item => item.id === cellValue)
      // return obj ? obj.value : '未知'
    },
    // 切换第几页 newPage参数就是第几页
    handleCurrentChange(newPage) {
      this.page = newPage
      // 渲染对应页码的列表
      this.getEmployeeList()
    },
    // 刷新列表
    async getEmployeeList() {
      this.loading = true
      const { data } = await reqGetEmployeeList(this.page, this.pageSize)
      const { total, rows } = data
      this.total = total
      this.list = rows
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.employees-container {
  .staff {
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
}
</style>
